<template>
    <input type="text" :value="modelValue" @input="handleInput" />
</template>

<script setup>
import { defineEmits, defineProps } from 'vue';

const props = defineProps({
    modelValue: String,
    modelModifiers: {
        default: () => ({})
    }
})
const emit = defineEmits(['update:modelValue'])

function handleInput(e) {
    let value = e.target.value
    if (props.modelModifiers.capitalize) {
        value = value.charAt(0).toUpperCase() + value.slice(1)
    }
    emit('update:modelValue', value)
}
console.log(props.modelValue, props.modelModifiers)


</script>

<style></style>